import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from "react-navigation";
import React, {
    Component,
  } from 'react';

import {
    View,
} from 'react-native';

import { connect } from 'react-redux';
import {
    createReactNavigationReduxMiddleware,
    reduxifyNavigator,
  } from 'react-navigation-redux-helpers';

import RegloginScreen from '../containers/reglogin';
import RegFillInfoScreen from '../containers/reglogin/fillInfo';
import RegFillFaverScreen from '../containers/reglogin/fillfaver';
import PhoneLoginScreen from '../containers/reglogin/login';

import ChatTabScreen from '../containers/tabs/chat';
import OnlineTabScreen from '../containers/tabs/online';
import LiveDetailScreen from '../containers/live/detail';
import MsgTabScreen from '../containers/tabs/msg';
import ChatDetailScreen from '../containers/msg/detail';
import MineTabScreen from '../containers/tabs/mine';
import SettingsScreen from '../containers/mine/settings';

import { base_color, word_color } from "../config/color.json";

import transition from './transition';
import BackBottom from './back';

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
    "root",
    state => state.nav,
);

//导航板块
const MainPageTabs = createBottomTabNavigator({
    Chat: ChatTabScreen,
    Online: OnlineTabScreen,
    Msg: MsgTabScreen,
    Mine: MineTabScreen
}, {
    initialRouteName: "Chat",
    lazy: false,
    transitionConfig: transition,
    tabBarOptions: {
        activeTintColor: base_color,
        inactiveTintColor: word_color,
        labelStyle: {
            fontSize: 10,
        },
        animationEnabled: true,
        style: {
            height: 50,
            backgroundColor: "#f9f9f9",
            paddingBottom: 3,
            paddingTop: 4
        }
    },
});

const HomeStack = createStackNavigator({
    Tabs: {
        screen: MainPageTabs,
        navigationOptions: ({navigation}) => ({
            header: null
        })
    },
    ChatDetail: ChatDetailScreen,
    Settings: SettingsScreen,
    LiveDetail: LiveDetailScreen
}, {
    initialRouteName: "Tabs",
    transitionConfig: transition,
    defaultNavigationOptions: BackBottom
});

//检查用户信息填写板块
const MainPageSwitch = createSwitchNavigator({
    Home: HomeStack,
    RegFillInfo: RegFillInfoScreen,
    RegFillFavor: RegFillFaverScreen,
}, {
    initialRouteName: "Home",
    transitionConfig: transition,
});

//注册登录板块
const RegloginStack = createStackNavigator({
    Reglogin: RegloginScreen,
    PhoneLogin: PhoneLoginScreen,
},{
    initialRouteName: "Reglogin",
    transitionConfig: transition,
    defaultNavigationOptions: BackBottom
});

const AppNavigator = createSwitchNavigator({
    Reglogin: RegloginStack,
    Mainpage: MainPageSwitch,
}, {
    initialRouteName: "Reglogin",
    defaultNavigationOptions: ({navigation}) => ({
        header: null
    })
});

const App = reduxifyNavigator(AppNavigator, "root");

function mapStateToProps(state) {
    return {
        state: state.nav
    }
}

const AppWithNavigationState = connect(mapStateToProps)(App);

export {AppNavigator, AppWithNavigationState, middleware}